<template>
  <section class="todoapp">
    <TodoHeaderVue @add="addFn"></TodoHeaderVue>
    <TodoMainVue :list="list" @del="delFn" @change="changeFn"></TodoMainVue>
    <TodoFooterVue></TodoFooterVue>
  </section>
</template>

<script>
import TodoFooterVue from './components/TodoFooter.vue'
import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue from './components/TodoMain.vue'
export default {
  data() {
    return {
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true },
      ],
    }
  },
  components: {
    TodoFooterVue,
    TodoHeaderVue,
    TodoMainVue,
  },
  methods: {
    //删除功能
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    //添加功能
    changeFn(id) {
      const result = this.list.find((item) => item.id === id)
      result.isDone = !result.isDone
    },
    //新增功能
    addFn(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false,
      })
    },
  },
}
</script>

<style></style>
